<template>
    <div>
        <Drawer title="Basic Drawer" placement="bottom" :closable="false" v-model="showValue" height="420" @on-visible-change="onVisibleChange">
            <div class="content-top-title" style="height:52px" slot="header">
                <div class="content-top-title-left" @click="showValue = false" style="cursor:pointer">
                    <div class="content-top-title-left-name" style="margin-right:48px">
                        <span>查看食谱评估详情</span>
                        <Icon type="ios-arrow-forward" size="20" />
                    </div>
                    <span style="font-size: 12px; color: red">
                        没有配料的菜肴不纳入计算
                    </span>
                </div>
                <div class="content-bottom-right" style="display:flex;align-items:center">
                    <span class="mr_10">平均伙食费</span>
                    <Input style="width:100px" readonly class="mr_16" :value="personMoney"></Input>
                    <span class="mr_10">总金额</span>
                    <Input style="width:100px" readonly class="mr_16" :value="totalMoney"></Input>
                    <cusButton type="primary" @onClick="openFenxi" ghost>营养分析</cusButton>
                </div>
            </div>
            <div class="contentBox" v-if="dataItem">
                <Tabs>
                    <TabPane label="伙食费评估">
                        <div class="addtable" v-if="dataItem.meal_money">
                            <div class="addtable-title">
                                <div class="addtable-title-title" style="width:100px">类别</div>
                                <div class="addtable-title-item" v-for="(item, index) in dateList" :key="index">{{ dateStrList[index].name }}({{ item }})</div>
                            </div>
                            <div class="addtable-title noTopBorder">
                                <div class="addtable-title-title noBg noTopBorder" style="width:100px">开支标准</div>
                                <div class="addtable-title-item noBg noTopBorder" v-for="(item, index) in nums" :key="index">
                                    <span style="color:#333333">{{ dataItem.meal_money[item].meal_money_standard }}</span>
                                </div>
                            </div>
                            <div class="addtable-title noTopBorder">
                                <div class="addtable-title-title noBg noTopBorder" style="width:100px">计划支出</div>
                                <div class="addtable-title-item noBg noTopBorder" v-for="(item, index) in nums" :key="index">
                                    <span v-if="dataItem.meal_money[item].meal_money > dataItem.meal_money[item].meal_money_standard" style="color:red">{{ dataItem.meal_money[item].meal_money }} ↑</span>
                                    <span v-if="dataItem.meal_money[item].meal_money == dataItem.meal_money[item].meal_money_standard" style="color:#333333">{{ dataItem.meal_money[item].meal_money }}</span>
                                    <span v-if="dataItem.meal_money[item].meal_money < dataItem.meal_money[item].meal_money_standard" style="color:green">{{ dataItem.meal_money[item].meal_money }} ↓</span>
                                </div>
                            </div>
                            <div class="addtable-title noTopBorder">
                                <div class="addtable-title-title noBg noTopBorder" style="width:100px">就餐人数</div>
                                <div class="addtable-title-item noBg noTopBorder" v-for="(item, index) in dataItem.jiucanRepastNumer.standardRepastNumer" :key="index">{{ item }}</div>
                            </div>
                        </div>
                    </TabPane>
                    <TabPane label="营养分析评估">
                        <div class="addtable" v-if="dataItem.nutritional_analysis">
                            <div class="addtable-title">
                                <div class="addtable-title-title">类别</div>
                                <div class="addtable-title-title" style="width:100px">标准</div>

                                <div class="addtable-title-item" v-for="(item, index) in dateList" :key="index">{{ dateStrList[index].name }}({{ item }})</div>
                            </div>
                            <div style="height:200px;overflow: hidden;overflow-y: auto;">
                                <div class="addtable-title noTopBorder" v-for="(item, index) in yinyanList" :key="index">
                                    <div class="addtable-title-title noBg noTopBorder">{{ item }}</div>
                                    <div class="addtable-title-title noBg noTopBorder" style="width:100px;color:green">{{ dataItem.nutritional_analysis.one.standardNutrition[index] }}</div>
                                    <div class="addtable-title-item noBg noTopBorder" v-for="(it, idx) in nums" :key="idx">
                                        <span style="color:#333333">{{ dataItem.nutritional_analysis[it].nutrition[index] }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </TabPane>
                    <TabPane label="食物定量评估">
                        <div class="addtable" v-if="dataItem.quantifyAnalysis">
                            <div class="addtable-title">
                                <div class="addtable-title-title">类别</div>
                                <div class="addtable-title-title" style="width:100px">标准</div>

                                <div class="addtable-title-item" v-for="(item, index) in dateList" :key="index">{{ dateStrList[index].name }}({{ item }})</div>
                            </div>
                            <div style="height:200px;overflow: hidden;overflow-y: auto;">
                                <div class="addtable-title noTopBorder" v-for="(item, index) in foodList" :key="index">
                                    <div class="addtable-title-title noBg noTopBorder">{{ item }}</div>
                                    <div class="addtable-title-title noBg noTopBorder" style="width:100px;color:green">{{ dataItem.quantifyAnalysis.one.standardOtherRation[index] }}</div>
                                    <div class="addtable-title-item noBg noTopBorder" v-for="(it, idx) in nums" :key="idx">
                                        <span style="color:#333333">{{ dataItem.quantifyAnalysis[it].otherRation[index] }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </TabPane>
                </Tabs>
            </div>
        </Drawer>
    </div>
</template>

<script>
// import { selectailocaldishtype, selectailocalfoodBydish } from "@/api/business/dishesModule";

export default {
    components: {},
    name: "nutritionModal",
    data() {
        return {
            showValue: false,
            nums: ['one', 'two', 'three', 'four', 'five', 'six', 'seven'],
            yinyanList: ['热量(千卡)', '蛋白质(克)', '脂肪(克)', '糖类(克)', '产热比(蛋白质:脂肪:糖类)', '一日三餐热能比(早:中:晚)', '维生素a(微克)', '维生素d(微克)', '维生素e(毫克)', '维生素b1(微克)', '维生素b2(微克)', '尼克酸(毫克)', '维生素b6(微克)', '维生素c(微克)', '钠(毫克)', '钾(毫克)', '镁(毫克)', '钙(毫克)', '磷(毫克)', '铁(毫克)', '锌(毫克)', '硒(微克)', '碘(微克)'],
            foodList: ['粮食(克)', '畜肉(克)', '禽肉(克)', '禽蛋(克)', '鱼虾(克)', '牛奶(克)', '大豆(克)', '蔬菜(克)']
        };
    },
    mounted() {
       
    },
    computed: {
        personMoney(){
            let total = 0;
            if(this.dataItem.meal_money) {
                for (const key in this.dataItem.meal_money) {
                    if(key != 'avg') {
                        total += this.dataItem.meal_money[key].meal_money;
                    }
                }
            }
            return (total/7).toFixed(2)
        },
        totalMoney(){
            let total = 0;
            if(this.dataItem.meal_money) {
                for (const key in this.dataItem.meal_money) {
                    if(key != 'avg') {
                        total += (this.dataItem.meal_money[key].meal_money * this.dataItem.jiucanRepastNumer.standardRepastNumer[this.nums.indexOf(key)]);
                    }
                }
            }
            return (total).toFixed(2)
        }
    }, 
    props: {
        dataItem: {
            type: Object,
            default () {
                return {}
            }
        },
        dateStrList: {
            type: Array,
            default () {
                return []
            }
        },
        dateList: {
            type: Array,
            default () {
                return []
            }
        },
        peopleList: {
            type: Array,
            default () {
                return []
            }
        },
    },
    methods: {
        onVisibleChange(v) {
            if(!v) {
                this.$parent.showNutrition = false;
            }
        },     
        show() {
            this.showValue = true;
        },
        openFenxi() {
            this.showValue = false;
            this.$parent.openFenxi();
        }
    },
};
</script>

<style scoped lang="less">
/deep/.ivu-drawer-mask {
    background-color: rgba(55, 55, 55, 0.1)!important;
}
/deep/.ivu-drawer-top  {
    left: 40px!important;
}
/deep/.ivu-drawer-bottom {
    left: 290px!important;
    right: 40px!important;
    width: auto;
    // margin-left: 40px;
    bottom: 88px!important;
    box-shadow: 0px -1px 6px 0px rgba(0,0,0,0.1200), 0px -1px 2px -2px rgba(0,0,0,0.1600);
}
/*里面的代码可以根据自己需求去进行更改*/
/* 设置滚动条的样式 */
::-webkit-scrollbar {
    width:4px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
    -webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
    border-radius:10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    border-radius:10px;
    background:rgba(0,0,0,0.1);
    -webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
    background:rgba(255,255,255,0.4);
}
.content-top {  
    &-title {
        height: 52px;
        padding: 0 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        &-left {
            display: flex;
            flex-direction: column;
            &-name {
                display: flex;
                align-items: center;
            }
            div {
                line-height: 40px;
                font-size: 16px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                span {
                    margin-right: 10px;
                }
            }
        }
        &-right {
            line-height: 40px;
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            span {
                margin-right: 10px;
            }
        }
    }
}
.mr_16 {
    margin-right: 16px;
}
.contentBox {
    position: relative;
    height: 100%;
}
.addtable {
    &-title {
        display: flex;
        border-left: 1px solid #CCCCCC;
        border-top: 1px solid #CCCCCC;
        border-bottom: 1px solid #CCCCCC;
        &-title {
            width: 160px;
            height: 50px;
            background: #33A5FE;
            border-right: 1px solid #CCCCCC;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #FFFFFF;
        }
        &-item {
            flex: 1;
            height: 50px;
            background: #33A5FE;
            border-right: 1px solid #CCCCCC;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #FFFFFF;
        }
    }
    &-body {
        overflow: hidden;
        overflow-y: auto;
        
        &-hang {
            display: flex;
            min-height: 33.3333%;
            border-bottom: 1px solid #CCCCCC;
            &-title {
                background: #FFF;
                border-right: 1px solid #CCCCCC;
                width:160px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #333333;
            }
            &-content {
                flex: 1;
                border-right: 1px solid #CCCCCC;
            }
        }
    }
}
.noBg {
    background: #FFFFFF!important;
    color: #333333;
}
.noTopBorder {
    border-top: none!important;
}
</style>
